import React, {Component} from 'react';
import PropTypes from "prop-types";
import {increment, decrement,incrementAsync} from "./redux/actions";
import {connect} from "react-redux";

class App extends Component {
    static propTypes = {
        count: PropTypes.number.isRequired,
        increment: PropTypes.func.isRequired,
        decrement: PropTypes.func.isRequired,
        incrementAsync: PropTypes.func.isRequired
    };
    increment = () => {
        const number = this.select.value;
        this.props.increment(number);
    };
    decrement = () => {
        const number = this.select.value;
        this.props.decrement(number);
    };
    incrementIfOdd = () => {
        const number = this.select.value;
        const {count} = this.props;
        if (count % 2 !== 0) {
            this.props.increment(number);
        }
    };
    incrementAsync = () => {
        const number = this.select.value;
        this.props.incrementAsync(number);
        /*setTimeout(() => {
            this.props.increment(number);
        }, 1000);*/
    };

    render() {
        const {count} = this.props;
        return (
            <div className="App">
                <p>click {count} times</p>
                <div>
                    <select ref={select => this.select = select}>
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                    </select>&nbsp;
                    <button onClick={this.increment}>+</button>
                    &nbsp;
                    <button onClick={this.decrement}>-</button>
                    &nbsp;
                    <button onClick={this.incrementIfOdd}>increment if odd</button>
                    &nbsp;
                    <button onClick={this.incrementAsync}>increment async</button>
                </div>
            </div>
        );
    }
}

export default connect(
    state => ({count: state}), {increment, decrement,incrementAsync}
)(App);
